<template>
  <div>
    <el-button @click="requestAjax">发起ajax</el-button>
    <el-button @click="cancelAjax">取消ajax</el-button>
  </div>
</template>
<script setup>
import axios from "axios";
let cancel = null;
function requestAjax() {
  if (cancel !== null) {
    cancel("重复点击发送，取消上一次请求");
  }
  axios.get("https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata", {
    cancelToken: new axios.CancelToken(function executor(c) {
      // executor 接收一个 cancel"(c)"函数作为参数
      cancel = c;
    }),
  });
}
function cancelAjax() {
  // cancel the request
  cancel("你手动把请求取消了");
}
</script>